<template>
  <div class="ke-register">
    <div class="banner">
      <div class="logo">
        <ke-logo />
      </div>
      <img src="../assets/images/login-banner.jpg" />
    </div>
    <div class="info">
      <div class="content">
        <div class="title">
          <p>欢迎注册在线课堂</p>
        </div>
        <div class="form">
          <el-form
            :model="registerUser"
            :rules="rules"
            ref="registerForm"
            label-width="80px"
            class="registerForm"
          >
            <el-form-item label="用户名" prop="nickName">
              <el-input type="text" v-model="registerUser.nickName" placeholder="请输入用户名" name="nickName"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input type="text" v-model="registerUser.email" placeholder="请输入邮箱" name="email"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="registerUser.password"
                placeholder="请输入密码"
                name="password"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPassword">
              <el-input
                type="password"
                v-model="registerUser.checkPassword"
                placeholder="请确认密码"
                name="checkPassword"
              ></el-input>
            </el-form-item>
            <el-form-item lable="选择身份">
              <el-select placeholder="请选择身份" v-model="registerUser.identity" name="identity">
                <el-option label="学生" value="student"></el-option>
                <el-option label="教师" value="teacher"></el-option>
              </el-select>
            </el-form-item>
            <div class="login-btn">
              <el-button type="primary" @click="handleToLoginPage">去登录</el-button>
              <el-button type="success" @click="submitForm('registerForm')" class="sub-btn">点击注册</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  components: {
    keLogo: () => import('../components/ke-logo')
  },
  data() {
    return {
      registerUser: {
        nickName: '',
        email: '',
        password: '',
        checkPassword: '',
        identity: ''
      },
      rules: {
        nickName: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 15,
            message: '必须在2到15个字符之间',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            trigger: 'blur',
            type: 'email',
            message: '邮箱格式不正确'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 20,
            message: '密码长度在6~20个字符之间',
            trigger: 'blur'
          }
        ],
        checkPassword: [
          {
            required: true,
            message: '确认密码不能为空',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 20,
            message: '密码长度在6~20个字符之间',
            trigger: 'blur'
          },
          {
            validator: this.validatePass2,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .post('/api/user/register', this.registerUser)
            .then(res => {
              // 注册成功
              this.$message({
                type: 'success',
                message: '注册成功'
              })
              // 跳转到登录页面
              this.$router.push('/login')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    validatePass2 (rule, value, callback) {
      if (value !== this.registerUser.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    },

    // 跳转到注册页面
    handleToLoginPage() {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="stylus" scoped>
.ke-register {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-sizing: border-box;
  z-index: -2;

  .banner {
    position: relative;
    height: 100%;
    width: 794px;
    box-sizing: border-box;
    overflow: hidden;
    flex: 2;

    .logo {
      margin-left: 50px;
      margin-top: 20px;
    }

    img {
      position: absolute;
      top: 0;
      z-index: -1;
      height: 100%;
    }
  }

  .info {
    flex: 1;
    width: 100%;
    overflow: hidden;

    .content {
      width: 400px;
      margin-top: 100px;

      .title {
        font-size: 44px;
        margin-bottom: 20px;
      }

      .form {
        .login-btn {
          margin-top: 50px;
          text-align: center;

          /deep/.el-button {
            width: 150px;
            height: 40px;
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style>
